/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with * this
work for additional information regarding copyright ownership. * The ASF licenses this file to You under the Apache License, Version 2.0 * (the
"License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * *
http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is
distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific
language governing permissions and * limitations under the License. */
/* eslint-disable */
<template>
  <!-- 订单详情-->
  <m-list-construction title="订单详情">
    <template slot="content">
      <div class="details">
        <div class="titleStyle">订单概要</div>
        <div class="details-items">
          <el-row :gutter="24">
            <el-col :span="8">
              <text-row
                label="订单编号： "
                label-width="60px"
              >&nbsp;{{info.no||'--'}}</text-row>
            </el-col>
            <el-col :span="8">
              <text-row
                label="订单类型： "
                label-width="60px"
              >&nbsp;{{info.orderType===1?'模型订单':'任务订单'}}</text-row>
            </el-col>
            <el-col :span="8">
              <text-row
                label="运行状态： "
                label-width="60px"
              >
                <mStatus :data="{
          type: info.taskStatus,
          statusName: info.taskStatus===1?'运行完成':info.taskStatus===2?'运行失败':'运行中'
        }" />
              </text-row>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <text-row
                label="消费账号： "
                label-width="60px"
              >&nbsp;{{info.userName||'--'}}</text-row>
            </el-col>
            <el-col :span="8">
              <text-row
                label="关联任务流名称： "
                label-width="100px"
              >&nbsp;{{info.processInstanceName||'--'}} </text-row>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <text-row
                label="付费模式： "
                label-width="60px"
              >&nbsp;{{info.payModel===0?'后付费':'--'}}</text-row>
            </el-col>
            <el-col
              :span="8"
              v-if="info.payStatus!==2"
            >
              <text-row
                label="支付时间： "
                label-width="60px"
              >&nbsp;{{info.payTime||'--'}}</text-row>
            </el-col>
            <el-col :span="8">
              <text-row
                label="支付状态： "
                label-width="60px"
              >&nbsp;{{getPicUrl(info.payStatus,'name')}}</text-row>
            </el-col>
          </el-row>
          <img
            :src="getPicUrl(info.payStatus,'url')"
            class="status"
          >
        </div>
      </div>
      <div style="padding-right:10px;background:#fff;margin-bottom: 20px;">
        <template>
          <div class="titleStyle">订单明细</div>
          <orderDetailList
            @on-edit="_onEdit"
            @on-update="_onUpdate"
            :tenement-list="tenementList"
          > </orderDetailList>
        </template>
        <template v-if="info.payStatus!==0">
          <div class="titleStyle">平台服务费 </div>
          <PlatformService
            @on-edit="_onEdit"
            @on-update="_onUpdate"
            :tenement-list="tenementList"
          > </PlatformService>
        </template>
        <div
          class="moneyBox"
          v-if="info.payStatus!==0"
        >
          <div class="moneyInfo">
            <p class="moneyInfo-item"><span class="moneyInfo-item-label">应付金额:</span><span class="moneyInfo-item-cout">{{`¥ ${info.amount||'0.00'}`}}</span></p>
            <p class="moneyInfo-item"><span class="moneyInfo-item-label">平台服务费:</span><span class="moneyInfo-item-cout">{{'¥ 0.00'}}</span></p>
            <p class="moneyInfo-item"><span class="moneyInfo-item-label">优惠金额:</span><span class="moneyInfo-item-discounts">{{`-¥ ${info.discountAmount||'0.00'}`}}</span></p>
            <p class="moneyInfo-item"><span class="moneyInfo-item-label">实付金额:</span><span class="moneyInfo-item-practical">{{`¥ ${info.realAmount||'0.00'}`}}</span></p>
          </div>
        </div>
      </div>
    </template>
  </m-list-construction>
</template>
<script>
  import mStatus from './components/mStatus.vue'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  import orderDetailList from './components/orderDetailList.vue'
  import PlatformService from './components/PlatformService.vue'
  import textRow from './components/textRow.vue'
  import { getProductOrder } from '@/conf/home/apis'
  export default {
    name: 'file-details',
    data () {
      return {
        tenementList: [],
        info: {}
      }
    },
    created () {
      console.log('this.$route.query.id', this.$route.query.id)

      this.getInfo()
    },
    methods: {
      /* 获取详情 */
      async getInfo () {
        try {
          const res = await getProductOrder({ id: this.$route.query.id })
          if (res.success) {
            const { detail, items } = res.data
            this.info = detail
            this.tenementList = items
          } else {
            this.$message.error(res.message)
          }
        } catch (error) {
          console.log('error', error)
        }
      },
      getPicUrl (ext, type = 'url') {
        let picUrl = ''
        let picName = ''
        switch (ext) {
          case 0:
            picUrl = 'unpaid.svg'
            picName = '待支付'
            break
          case 1:
            picUrl = 'paid.svg'
            picName = '已支付'
            break
          case 2:
            picUrl = 'voided.svg'
            picName = '已作废'
            break
        }
        if (type === 'url') {
          return picUrl ? require('../../_source/image/billing/' + picUrl) : ''
        } else {
          return picName
        }
      },
    },
    components: { mListConstruction, orderDetailList, textRow, mStatus, PlatformService }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.details {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #fff;
  &-items {
    position: relative;
    border-bottom: 1px solid #ececec;
    margin: 0 10px;
    padding-bottom: 10px;
    .status {
      position: absolute;
      right: 40px;
      bottom: -30px;
    }
  }
}
.moneyBox {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-top: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  .moneyInfo {
    margin-bottom: 10px;
    &-item {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      width: 200px;
      &-label {
        text-align: right;
        color: #666666;
        width: 90px;
      }
      &-cout {
        text-align: right;
        color: #333333;
        // font-size: 14px;
      }
      &-discounts {
        text-align: right;
        color: #f7564e;
        // font-size: 14px;
      }
      &-practical {
        text-align: right;
        color: #f7564e;
        font-size: 18px;
      }
    }
  }
}
.titleStyle {
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  font-size: 8px;
  font-family: PingFang SC, PingFang SC-600;
  font-weight: 600;
  text-align: LEFT;
  color: #333333;
  padding-left: 10px;
}
</style>
